<!-- <script lang="ts" setup>
import lodash from 'lodash'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import Color from 'color'
import { theme } from '../themes'
import { Content } from './notify'

const props = defineProps<{
  contents: Content[]
}>()

// const contents = ref([] as Content[])
const revertList = computed(() => lodash.reverse(
  lodash.cloneDeep(props.contents),
))

const styles = ref(new Map<string, any>())

function calcStyle() {
  const now = Date.now()
  props.contents.forEach((item) => {

  })
}

onMounted(() => {
  // setInterval(() => {
  //   calcStyle()
  // }, 200)
})

function keyOf(content: Content) {
  return `${content.type}${content.create}${content.message}`
}

function mixChannel(a: number, wa: number, b: number) {
  return a * wa + b * (1 - wa)
}

const sContents = computed(() => JSON.parse(JSON.stringify(props.contents)) as Content[])
watch(sContents, (val, oldVal) => {
  if (!oldVal || val.length > oldVal.length) {
    const content = lodash.last(props.contents)!
    const type = content.type
    const k = keyOf(content)
    const c1 = theme.current[type]
    console.log(c1)
    const _c2 = new Color(c1)
    const __c2 = Color({
      r: mixChannel(_c2.red(), 0.25, 255),
      g: mixChannel(_c2.green(), 0.25, 255),
      b: mixChannel(_c2.blue(), 0.25, 255),
    })
    const c2 = __c2.hex()
    console.log(c2)
    const style = {
      border: `1px solid ${c1}`,
      backgroundColor: 'white',
      borderRadius: '0.5rem',
      color: c1,
      background: c2,
      opacity: 0,
      transform: 'translate(0, -10px)',
      transition: '0.25s all ease-in-out',
    }
    styles.value.set(k, style)
    setTimeout(() => {
      // style.opacity = 1
      styles.value.set(k, {
        ...style,
        opacity: 1,
        transform: 'none',
      })
    }, 50)
  }
  // calcStyle()
}, {
  immediate: true,
})

function calcIcon(item: Content): string {
  return {
    primary: 'circle-exclamation',
    success: 'circle-check',
    warning: 'circle-exclamation',
    danger: 'circle-exclamation',
    error: 'circle-xmark',
    info: 'circle-exclamation',
  }[item.type]
}
</script>

<template>
  <div id="lx-notify" pointer-events-none fixed left-0 top-0 h-screen w-screen p4>
    <div
      v-for="(item, index) in revertList" :key="index"
      :style="styles.get(keyOf(item))"
      w="80%" m-auto mb2 py2 text-center
    >
      <FontAwesomeIcon :icon="calcIcon(item)" mr1 />
      <span>{{ item.message }}</span>
    </div>
  </div>
</template>

<style scoped>

</style> -->
